<template>
	<div id="user-profile">
		<van-form @submit="onSubmit">
			<van-field label="用户" v-model="userForm.id" type="text" readonly />
			<van-field label="用户" v-model="userForm.name" type="text" placeholder="请输入用户"
				:rules="[{ pattern:regNamePwd,required: true, message: '无效用户名' }]" />
			<van-field label="邮箱" v-model="userForm.email" type="email" placeholder="请输入邮箱"
				:rules="[{ pattern:regEmail, message: '无效邮箱' }]" />
			<van-field label="电话" v-model="userForm.phone" type="tel" placeholder="请输入电话"
				:rules="[{ pattern:regPhone, message: '无效手机号码' }]" />
			<van-field name="radio" label="性别">
				<template #input>
					<van-radio-group v-model="userForm.gender" direction="horizontal">
						<van-radio :name="1">男</van-radio>
						<van-radio :name="0">女</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field label="昵称" v-model="userForm.nick_name" type="text" placeholder="请输入昵称"></van-field>
			<van-field name="uploader" label="头像">
				<template #input>
					<van-uploader name="avatar" v-model="avatarList" :max-count="1" :after-read="afterRead" />
				</template>
			</van-field>

			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit">提交</van-button>
			</div>
		</van-form>
	</div>
</template>

<script>
	import { showToast } from 'vant'; //vant4的语法
	import {
		getDetailByIdAPI,
		updateAPI,
		uploadAvatarAPI
	} from "@/api/user.js";

	import { getUserLocal } from "@/utils/auth.js";

	export default {
		data() {
			return {
				userForm: { //表单中的字段名与数据库中用户表的字段名要求一致
					id: null,
					name: "",
					email: "",
					phone: "",
					gender: 1,
					avatar: "",
					nick_name: "",
				},

				avatarList: [],
				//规则:字母数字‘6~12        
				regNamePwd: /^[a-z0-9]{3,12}$/i,
				regPhone: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
				regEmail: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
			};
		},

		created() {
			let id = getUserLocal().id;
			getDetailByIdAPI(id).then(result => {
				this.userForm = result.data;
				this.avatarList = [];
				this.avatarList.push({
					url: this.APIDomainName + this.userForm.avatar
				});
			});
		},

		methods: {
			//手动处理文件上传
			afterRead(file, detail) {
				file.status = 'uploading';
				file.message = '上传中...';
				uploadAvatarAPI(file, detail).then(result => {
					file.status = '';
					file.message = '';
					//重新生成显示的图片url
					this.avatarList = [];
					this.avatarList.push({
						url: this.APIDomainName + result.url
					})

					//设置用户表中的字段值
					this.userForm.avatar = result.url;
				});
			},

			//处理提交保存
			onSubmit() {
				//注意传递过去的参数user的属性名
				let user = this.userForm;
				updateAPI(user).then(() => {
					showToast("更新成功！"); //vant4的语法
					this.$router.push({
						name: "user"
					});
				});
			},
		},

	};
</script>

<style lang="less" scoped>
</style>